<template>
  <div class="atoast-bg" v-show="show" @click="clickOnThe">
    <div class="point">
      <div class="pop">
        <div class="addunit-title"> <span> {{ title }}</span></div>
        <a
          @click="closeClick()"
          style="position: absolute; top: 10px; right: 10px; color: #fff"
        >
          <i class="el-icon-close"></i
        ></a>
        <div class="addunit-content">
          <slot></slot>
        </div>
        <div class="addunit-button">
          <el-button type="primary" @click="clickbutton()">
            {{
            buttonTitle
          }}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
    };
  },
  props: ["title", "buttonTitle", "show"],
  created() {},
  computed: {

  },
  methods: {
    clickbutton() {
      this.$emit("handleClick");
    },
    closeClick() {
      this.$emit("closehandle");
    },
    clickOnThe() {
      this.$emit("input", !this.value);
    },
  },
};
</script>

<style lang="less">
.atoast-bg {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: fixed;
  z-index: 999;
  background: rgba(0, 0, 0, 0.3);

  .addunit-button {
  text-align: center;
  margin-bottom: 30px;
    .el-button {
      width: 50%;
      height: 40px;
    }
  }
.pop {
    min-width: 300px;
    position: absolute;
    left: -150px;
    top: -150px;
    border-radius: 4px;

    .el-input {
      width: 90%;
    }
    background: #fff;
    
  }
  .addunit-title {
    width: 100%;
    height: 44px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #67c23a;
    color: #fff;
  }
  .addunit-card {
    width: 100%;
    margin: 10px auto;
    border-radius: 4px;
    //   box-shadow: 10px 10px 5px #dddddd;
    padding-bottom: 10px;
    position: absolute;
  }
  .addunit-content {
    width: 100%;
    display:flex;
  }

  .point {
    position: absolute;
    left: 50%;
    top: 50%;
    padding: 10px;
  }
  
}
</style>